<template>
	<view class="content">
		<view class="helmet">
			<view class="devices">
				<view class="dev_snum">

				</view>
			</view>
			<view class="dev_state">
				<view class="dev_icon">
					<image class="maxiconSize" src="@/static/device/locus-full.svg" mode=""></image>
				</view>
				<view class="state_info">
					<view class="info_item">
						<view class="">
							502
						</view>
						<view class="">
							保养总数
						</view>
					</view>
					<view class="info_item">
						<view class="">
							500
						</view>
						<view class="">
							今日保养
						</view>
					</view>
					<view class="info_item">
						<view class="">
							2
						</view>
						<view class="">
							未完成
						</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 主体部分 -->
		<view class="dev_tabs">
			<!-- 信息总览 -->
			<view class="dev_info_item dev_msg">
				<view class="device_con">
					<view class="device_state">
						<view class="state_logo">
							<view class="">
								<image src="@/static/device/g-ningmeng.svg" mode=""></image>设备状态
							</view>
							<view class="">
								保养中
							</view>
						</view>
						<view class="device_img">
							<image src="@/static/device/shebei.png" mode=""></image>
						</view>
					</view>
					<view class="parameters">
						<view class="par_icon icon_item">
							<view class="">
								<image src="@/static/device/lv-ningmeng.svg" mode=""></image>今日完成情况
							</view>
							<view class="">
							</view>
						</view>
						<view class="par_pre">
							<view class="pre_item">
								<view class="">
									<text class="pre_tle">15 / 15</text>
									<text class="pre_peo">件</text>
								</view>
								<view class="pre_dus">
									<u-circle-progress :border-width="8" :width="100" active-color="#25C689" :percent="80">
										<view class="u-progress-content">
											<text class='u-progress-info'>80%</text>
										</view>
									</u-circle-progress>
								</view>
							</view>
						</view>
					</view>
					<view class="history">
						<view class="par_icon icon_item">
							<view class="">
								<image src="@/static/device/zi-ningmeng.svg" mode=""></image>历史未完成
							</view>
							<view class="">
							</view>
						</view>
						<view class="his_con">
							<view class="his_item" style="margin-right: 160rpx;">
								<view class="">
									今年
								</view>
								<view class="">
									<text class="year_num">365</text>
									<text>次</text>
								</view>
							</view>
							<view class="his_item">
								<view class="">
									总数
								</view>
								<view class="">
									<text class="all_num">365</text>
									<text>次</text>
								</view>
							</view>
						</view>
					</view>
					<view class="monthly">
						<view class="par_icon icon_item" style="padding-left: 36rpx;">
							<view class="">
								<image src="@/static/device/red-ningmeng.svg" mode=""></image>月统计
							</view>
							<view class="">
							</view>
						</view>
						<view class="mon_con">
							<view class="mon_frist">
								<view class="mon_item" style="margin-bottom: 50rpx;">
									<view class="">
										完成数(次)
									</view>
									<view class="">
										<text class="qu_num">365</text>
									</view>
								</view>
								<view class="mon_item">
									<view class="">
										未完成(次)
									</view>
									<view class="">
										<text class="un_num">365</text>
									</view>
								</view>
							</view>
							<view class="magarizonaine">
								<view class="tle">周加工(件)</view>
								<view id="mont_echarts">
									<qiun-data-charts type="pie" :opts="opts" canvasId="canvasColumn" :chartData="chartData" :ontouch="true"
									 :canvas2d="true" background="none" />
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				plantTitle: '注塑机',
				chartData: {
    "categories": [
        "9/23周",
        "9/30周",
        "10/07周",
        "本周"
    ],
    "series": [
        {
            "name": "目标值",
            "data": [
                35,
                36,
                31,
                33
            ]
        }
    ]
},
				"opts":{
    "type": "column",
    "canvasId": "",
    "canvas2d": false,
    "background": "none",
    "animation": true,
    "timing": "easeOut",
    "duration": 1000,
    "color": [
        "#1890FF",
        "#91CB74",
        "#FAC858",
        "#EE6666",
        "#73C0DE",
        "#3CA272",
        "#FC8452",
        "#9A60B4",
        "#ea7ccc"
    ],
    "padding": [
        15,
        0,
        0,
        0
    ],
    "rotate": false,
    "errorReload": true,
    "fontSize": 13,
    "fontColor": "#666666",
    "enableScroll": false,
    "touchMoveLimit": 60,
    "enableMarkLine": false,
    "dataLabel": true,
    "dataPointShape": true,
    "dataPointShapeType": "solid",
    "tapLegend": true,
    "xAxis": {
        "disabled": false,
        "axisLine": true,
        "axisLineColor": "#CCCCCC",
        "calibration": false,
        "fontColor": "#666666",
        "fontSize": 13,
        "rotateLabel": false,
        "itemCount": 5,
        "boundaryGap": "center",
        "disableGrid": true,
        "gridColor": "#CCCCCC",
        "gridType": "solid",
        "dashLength": 4,
        "gridEval": 1,
        "scrollShow": false,
        "scrollAlign": "left",
        "scrollColor": "#A6A6A6",
        "scrollBackgroundColor": "#EFEBEF",
        "format": ""
    },
    "yAxis": {
        "disabled": true,
        "disableGrid": false,
        "splitNumber": 5,
        "gridType": "solid",
        "dashLength": 8,
        "gridColor": "#CCCCCC",
        "padding": 10,
        "showTitle": false,
        "data": []
    },
    "legend": {
        "show": false,
        "position": "bottom",
        "float": "center",
        "padding": 5,
        "margin": 5,
        "backgroundColor": "rgba(0,0,0,0)",
        "borderColor": "rgba(0,0,0,0)",
        "borderWidth": 0,
        "fontSize": 13,
        "fontColor": "#666666",
        "lineHeight": 11,
        "hiddenColor": "#CECECE",
        "itemGap": 10
    },
    "extra": {
        "column": {
            "type": "group",
            "width": 12,
            "seriesGap": 2,
            "categoryGap": 3,
            "barBorderCircle": false,
            "linearType": "custom",
            "linearOpacity": 1,
            "customColor": [
                "#C67A78",
                "#C67A78"
            ],
            "colorStop": 1,
            "meterBorder": 1,
            "meterFillColor": "#FFFFFF",
            "activeBgColor": "#000000",
            "activeBgOpacity": 0.08,
            "meterBorde": 1
        },
        "tooltip": {
            "showBox": true,
            "showArrow": true,
            "showCategory": false,
            "borderWidth": 0,
            "borderRadius": 0,
            "borderColor": "#000000",
            "borderOpacity": 0.7,
            "bgColor": "#000000",
            "bgOpacity": 0.7,
            "gridType": "solid",
            "dashLength": 4,
            "gridColor": "#CCCCCC",
            "fontColor": "#FFFFFF",
            "splitLine": true,
            "horizentalLine": false,
            "xAxisLabel": false,
            "yAxisLabel": false,
            "labelBgColor": "#FFFFFF",
            "labelBgOpacity": 0.7,
            "labelFontColor": "#666666"
        },
        "markLine": {
            "type": "solid",
            "dashLength": 4,
            "data": []
        }
    }
},

			};
		},
		mounted() {},
		methods: {}
	}
</script>

<style lang="scss" scoped>
	@mixin maxIconSize {
		width: 74rpx;
		height: 74rpx;
	}

	@mixin minIconSize {
		width: 40rpx;
		height: 40rpx;
	}

	.icon_item {
		color: #777777;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		justify-content: space-between;
		padding-right: 104rpx;

		image {
			@include minIconSize;
			margin-right: 20rpx;
		}

		view {
			display: flex;
			align-items: center;
		}

		view:nth-child(2) {
			image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 8rpx;
			}
		}
	}

	/deep/ .u-navbar {
		background: $maincolor !important;
		color: #FFFFFF !important;
	}

	/deep/ .u-back-wrap {

		padding: 0 10rpx 0 0 !important;
	}

	.content {
		/deep/ .u-iconfont {
			display: none !important;
		}

			background: #fafafa;
		position: relative;

		.helmet {
			position: fixed;
			width: 100%;
			z-index: 9;
			background: #fff;

			.devices {
				position: relative;
				z-index: 1;
			background-color: $maincolor;
				@include box_rightBot_radius(100%);
				box-sizing: border-box;
				padding: 0 44rpx;

				.dev_snum {
					padding: 44rpx 0 86rpx 0;
					font-size: 24rpx;
					color: #FFFFFF;
				}

			}

			.dev_state {
				position: relative;
				z-index: 9;
				margin: -60rpx 44rpx 44rpx 44rpx;
				@include box_shadow;
				border-radius: 24rpx;
				color: $bodyColor;
				background: #ffffff;
				padding: 80rpx 40rpx 30rpx 40rpx;
				box-sizing: border-box;

				
				.dev_icon {
					position: absolute;
					margin-left: calc(50% - 105rpx);
					margin-top: -140rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: $maincolor;
					border-radius: 60rpx;
					
						width: 120rpx;
						height: 120rpx;
				
					image {
						width: 74rpx;
						height: 74rpx;
					}
				}

				.state_info {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.info_item {
						display: flex;
						flex-direction: column;
						align-items: center;
						box-sizing: border-box;

						view:nth-child(1) {
							color: #3b86f8;
							font-size: 28rpx;
						}

						view:nth-child(2) {
							font-size: 24rpx;
							color: #666666;
						}
					}
				}
			}


		}

		.dev_tabs {
			padding: 100rpx 0 0 0;
			position: relative;
			// overflow-y: scroll;
			overflow: hidden;

			.device_con {
				overflow-y: scroll;
			}

			.dev_info_item {
				display: flex;
				flex-direction: column;
				padding-top: 112rpx;
			}

			.dev_msg {
				.device_state {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 74rpx 44rpx 40rpx 56rpx;
					background: #FFFFFF;

					.state_logo {
						display: flex;
						flex-direction: column;
						align-items: center;

						view:nth-child(1) {
							margin-bottom: 40rpx;
							color: #777777;
							display: flex;
							align-items: center;
							font-size: 28rpx;
						}

						view:nth-child(2) {
							font-size: 24rpx;
							background: #358aef;
							padding: 2rpx 16rpx;
							border-radius: 4rpx;
							color: #FFFFFF;
						}

						image {
							@include minIconSize;
							margin-right: 20rpx;
						}
					}

					.device_img {
						image {
							width: 336rpx;
							height: 140rpx;
						}
					}
				}

				.parameters {
					padding: 36rpx 36rpx 40rpx 36rpx;
					margin: 0 20rpx 20rpx 20rpx;
					background: #FFFFFF;
					display: flex;
					flex-direction: column;
					@include box_shadow;

					@include box_radius(8rpx) .par_pre {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 26rpx;

						.pre_item {
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-between;

							view {
								display: flex;
								align-items: center;

								text:nth-child(1) {
									margin-right: 10rpx;
								}
							}

							.pre_tle {
								color: #101010;
								font-size: 32rpx;
							}

							.pre_peo {
								color: #AEAEAE;
							}

							.pre_bra {
								color: #00C0DE;
							}
						}
					}
				}

				.history {
					padding: 36rpx 36rpx 40rpx 36rpx;
					margin: 0 20rpx 20rpx 20rpx;
					background: #FFFFFF;
					display: flex;
					flex-direction: column;
					@include box_shadow;
					@include box_radius(8rpx);

					.his_con {
						display: flex;

						.his_item {
							view:nth-child(1) {
								font-size: 24rpx;
								color: #545454;
							}

							view:nth-child(2) {
								font-size: 22rpx;
								color: #AEAEAE;
							}

							.year_num {
								color: #7C90C2;
								font-size: 48rpx;
								margin-right: 4rpx;
							}

							.all_num {
								color: #676767;
								font-size: 48rpx;
								margin-right: 4rpx;
							}
						}
					}
				}

				.monthly {
					padding: 36rpx 0rpx 40rpx 0rpx;
					margin: 0 20rpx 20rpx 20rpx;
					background: #FFFFFF;
					display: flex;
					flex-direction: column;
					@include box_shadow;
					@include box_radius(8rpx);

					.mon_con {
						display: flex;
						align-items: center;
						justify-content: space-between;
						background: #FEFAF9;
						padding: 30rpx 30px 20rpx 30rpx;

						.mon_frist {
							display: flex;
							flex-direction: column;
							margin-right: 40rpx;

							.mon_item {
								color: #545454;
								font-size: 24rpx;

								.qu_num {
									color: #B47B81;
									font-size: 48rpx;
								}

								.un_num {
									color: #333333;
									font-size: 48rpx;
								}
							}
						}

						.magarizonaine {
							.tle {
								font-size: 20rpx;
								color: #B3B1B2;
								margin-bottom: 16rpx;
							}

							#mont_echarts {
								width: 460rpx;
								height: 240rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
